<script setup>
import {ref, computed} from 'vue'
import CommonPage from '../comp/commonPage.vue'
const {data} = defineProps({
  data: Object
})
const listFields = computed(() => data.fieldsMeta.filter(it => it.visibleInList))
const searchFields = computed(() => data.fieldsMeta.filter(it => it.searchCondition))

const loadAllSql = computed(()=>{
  console.log(searchFields.value)
  let SQL= "SELECT * FROM "+ data.tableName
  let conditions = searchFields.value.map(it => "#[ AND "+it.columnName+' = '+":"+it.columnName+"]").join(" ")
  return SQL + " WHERE "+conditions
})
const listApi=computed(()=>{
  return "model/"+data.id+"/page"
})
const showPerView=ref(false)
const perView=()=>{
  showPerView.value=true
}
</script>

<template>
  <FiledGroup style="height: 100%;" hideNavBar>
    <Legend title="列表配置"/>
    <Form>
      <FormItem label="查询语句" prop="loadAllSql">
        <Input type="text" v-model="data.loadAllSql" :placeholder="loadAllSql"/>
      </FormItem>
      <FormItem label="列表接口" prop="listApi">
        <Input type="text" v-model="data.listApi" :placeholder="listApi"/>
      </FormItem>
      <FormItem label="页面地址" prop="pageUrl">
        <div class="h-input-group">
          <Input type="text" v-model="data.pageUrl"/>
          <span @click="perView" class="h-input-addon" style="user-select: none;cursor: pointer">预览</span>
        </div>
      </FormItem>
    </Form>
    <Legend title="查询字段"/>
    <Table :datas="searchFields">
      <TableItem title="字段名" prop="columnName" :width="220"></TableItem>
      <TableItem title="标题" :width="100" prop="title"></TableItem>
      <TableItem title="搜索类型" :width="100"></TableItem>
      <TableItem title="宽度" :width="100"></TableItem>
      <TableItem title="控件" :width="100"></TableItem>
      <TableItem title="提示" prop="memo"></TableItem>
      <TableItem title="数据项"></TableItem>
    </Table>
    <Legend title="列表显示"/>
    <Table :datas="listFields">
      <TableItem title="字段名" prop="columnName" :width="220"></TableItem>
      <TableItem title="标题" :width="100" prop="title"></TableItem>
      <TableItem title="宽度" :width="100"></TableItem>
      <TableItem title="格式化" :width="100"></TableItem>
      <TableItem title="单位" prop="memo"></TableItem>
      <TableItem title="数据项" prop="memo"></TableItem>
    </Table>
  </FiledGroup>
  <div v-if="showPerView" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2">
    <CommonPage :modeId="data.id"/>
  </div>
</template>

<style scoped>

</style>
